<template>
	<view class="content">
		<u-navbar title="选择位置" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="search_address">
			<view class="search_content">
				<u-search shape="square" @change="searchAdd" height='100rpx' @focus='list_show=true' :showAction='false'
					:inputStyle="inputStyle"></u-search>
			</view>
			<view class="btn" v-show="list_show" @click="list_show=false">
				取消
			</view>
		</view>
		<view class="list" v-show="list_show">
			<u-list>
				<u-list-item v-for="(item, index) in addData" :key="index">
					<u-line></u-line>
					<view class="add_item" @click="selectAddress(item)">
						<view class="add_title">
							{{item.title}}
						</view>
						<view class="add_info">
							{{item.address}}
						</view>
					</view>
					<u-line></u-line>
				</u-list-item>
			</u-list>
		</view>
		<view class="page-section page-section-gap">
			<map style="width: 100%; height: 300px;" @regionchange="onRegionChange" id='map' ref='map'
				:latitude="coor.latitude" :longitude="coor.longitude" :markers="covers">
				<view class="map_ico">
					<u-icon name="map-fill" color="#FF594D" size="40rpx"></u-icon>
				</view>
			</map>
		</view>
		<view class="address" @click="addressShow = true;">
			<view class="add">
				地址
			</view>
			<view class="address">
				{{address}}
			</view>
		</view>
		<view class="affirm">
			<view class="affirm_btn" @click="affirm">
				确认地址
			</view>
		</view>
		<address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow=false'
			@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
			:type="type"></address-picker>
	</view>
</template>

<script>
	import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'
	export default {
		onLoad() {

		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				coor: {
					latitude: 39.909,
					longitude: 116.39742
				},
				covers: [],
				address: '',
				addressShow: false,
				indexs: [0, 0, 0],
				areaId: [1, 110000, 110101],
				addressData: ['北京市', '北京市', '东城区'],
				type: 3, //1-省，2-省市，3-省市区
				mapObjs: null,
				inputStyle: {
					height: '60rpx'
				},
				list_show: false,
				addData: [],
			}
		},
		created() {

			const _this = this
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								uni.showToast({
									title: '授权成功',
									icon: 'success'
								});
							},
							fail(err) {
								uni.showModal({
									title: '是否授权获取位置信息',
									success(res) {
										if (res.confirm) {
											uni.openSetting({
												success() {
													console.log('开启权限成功');
												},
												fail() {
													console.log('开启权限失败');
												}
											});
										} else if (res.cancel) {
											console.log('拒绝开启开启权限');
										}
									}
								});
							}
						});
					} else {
						uni.getLocation({
							isHighAccuracy: true,
							success(res) {
								// console.log(res);

								_this.coor = {
									latitude: res.latitude,
									longitude: res.longitude
								}
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				}
			})
		},
		mounted() {
			let qqmapsdk = new QQMapWX({
				key: '5I7BZ-ZH7WI-5FPGW-UBRXJ-5W35E-34BNV'
			});
			this.qqmapsdk = qqmapsdk
		},
		watch: {
			address() {

			}
		},
		methods: {
			affirm() {
				this.$store.commit('setCircleAddress', this.address)
				uni.navigateBack()
			},

			onRegionChange(e) {
				if (e.type === 'end') { //在安卓中是 end 事件
					this.getCenterLatLong() // 地图移动时获取中心点的经纬度
				} else if (e.type === 'regionchange') { // 在ios中是 regionchange
					this.getCenterLatLong() // 地图移动时获取中心点的经纬度
				}
			},
			confirmAddress(val) {
				console.log(val);
				this.address = val.value.join('')
				this.addressShow = false
				this.qqmapsdk.geocoder({
					address: this.address,
					success: (res) => {
						console.log(res);
						this.coor = {
							latitude: res.result.location.lat,
							longitude: res.result.location.lng
						}
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			searchAdd(address) {
				this.qqmapsdk.getSuggestion({
					keyword: address,
					success: (res) => {
						console.log(res);
						this.addData = res.data

					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			selectAddress(item) {
				this.address = item.address + item.title
				this.list_show = false
				console.log(this.address);
				this.qqmapsdk.geocoder({
					address: this.address,
					success: (res) => {
						console.log(res);
						this.coor = {
							latitude: res.result.location.lat,
							longitude: res.result.location.lng
						}
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			getCenterLatLong() {
				let mapObjs = uni.createMapContext('map', this) // 得到map实例对象
				mapObjs.getCenterLocation({
					success: res => {

						this.qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res) => {
								// console.log(res);
								// this.address = res.result.address + (res.result.formatted_addresses.recommend ?
								// 	res.result.address_reference.famous_area.title : '')	
								this.address = res.result.address + res.result.formatted_addresses.recommend
								this.qqmapsdk.geocoder({
									address: this.address,
									success: (res) => {
										console.log(res);

									},
									fail(err) {
										console.log(err);
									}
								})
							},
							fail(err) {
								console.log(err);
							}
						})
					},
					fail: res => {
						console.log('p1111:', res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		position: relative;

		.list {
			background-color: #fff;
			position: absolute;
			width: 750rpx;
			top: 290rpx;
			left: 0;
			z-index: 11;

			.add_item {
				height: 140rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding-left: 30rpx;

				.add_title {
					font-size: 32rpx;
					color: #000;
					padding-bottom: 20rpx;
				}

				.add_info {
					font-size: 26rpx;
					color: #777;
				}
			}
		}

		.search_address {
			height: 120rpx;
			display: flex;
			background-color: #fff;
			align-items: center;
			padding: 0 20rpx;

			.search_content {
				// width: 100%;
				flex: 1;

			}

			.btn {
				font-size: 30rpx;
				padding-left: 20rpx;
				color: #0079FF;

			}
		}

		.page-section-gap {
			position: relative;

			.map_ico {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.address {
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			font-size: 30rpx;
			padding: 10rpx 20rpx;

			// padding-top: 30rpx;
			.add {
				height: 100rpx;
				width: 80rpx;
				line-height: 100rpx;
				text-align: center;
				white-space: nowrap;
			}

			.address {
				flex: 1;
			}
		}

		.affirm {
			padding: 80rpx 50rpx 0;

			.affirm_btn {
				border-radius: 555rpx;
				height: 60rpx;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
				line-height: 58rpx;
				background-color: #FF594D;
			}
		}
	}
</style>